<template>
  <v-card class="ExistingCustomer-container" tile>
    <v-list dense class="pa-2 list-container">
      <v-list-item-group v-model="selectedValue">
        <v-list-item
          class="pl-2 pr-2 list-item"
          v-for="company in companyList"
          :key="company.id"
          @click="contactNavigation(company)"
        >
          <v-list-item-content>
            <v-list-item-title
              v-text="company.entityName"
              class="list-item-title text-left"
            ></v-list-item-title>
            <v-list-item-subtitle
              v-text="company.entityNumber"
              class="list-item-content text-left"
            ></v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-card>
</template>

<script lang="ts">
import { Vue, Component, ModelSync } from "vue-property-decorator";
import { routeMapping, router } from "@/router";
import { catchRouteErr } from "@/common/constants/Utils";
import { ICompany } from "@/components/Customer/index";
@Component({})
export default class ExistingCustomer extends Vue {
  @ModelSync("selected", "input", { type: Number }) selectedValue!: number;
  get companyList() {
    return this.$store.state.ExistingCustomerStore.companyList;
  }
  contactNavigation(company: ICompany) {
    this.$store.commit("ContactInfoStore/setAddress", company.addressTree);
    this.$store.commit("ContactInfoStore/setSelectedCompany", company);
    router.push({ name: routeMapping.Customer.ContactInfo }).catch((err) => {
      catchRouteErr(err);
    });
  }
  addCompany() {
    const company = this.createInitCompany();
    this.contactNavigation(company);
  }

  createInitCompany() {
    return {
      id: "",
      entityNumber: "",
      entityType: "",
      entityName: "",
      addressTree: [
        // {
        //   id: String(new Date().getTime()),
        //   locationCode: "",
        //   parentLocation: "",
        //   address: "",
        //   country: "",
        //   district: "",
        //   area: "",
        //   contactInfo: {
        //     setting: {
        //       id: String(new Date().getTime()),
        //       projectName: "",
        //       priority: "",
        //       projectType: "",
        //       projectLocation: "",
        //       projectDescription: "",
        //       items: [],
        //     },
        //     items: {
        //       id: String(new Date().getTime()),
        //       type: "",
        //       address: "",
        //       items: [],
        //     },
        //     contactPersons: [],
        //     contracts: [],
        //   },
        // },
      ],
    };
  }
  mounted() {
    this.$bus.$on("addCompany", this.addCompany);
  }
}
</script>
<style lang="scss" scoped>
@import "./ExistingCustomer.scss";
</style>
